.modal{
    z-index: 10;
    transition: all .5s;
    @include position(fixed);
    .mask{
        @include position(fixed);
        background-color: $colorI;
        opacity: .5;
    }
   
    &.slide-enter-active{
        top: 0;
    }
    &.slide-leave-active{
        top: -100%
    }
    &.slide-enter{
        top: -100%;
    }
    .modal-dialog{
        @include position(absolute,40%,50%,660px,auto);
        background-color: $colorG;
        transform: translate(-50%,-50%);
    }
    .modal-header{
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        padding: 0 25px;
        background-color: #f5f5f5;
        .icon-close{
            @include positionImg(absolute,23px,25px,14px,14px,'/imgs/icon-close.png');
            transition:transform .3s;
            &:hover{
                transform:scale(1.5 )
            }
        }
    }
    .modal-body{
        padding: 42px 40px 54px;
        font-size: 14px;
    }
    .modal-footer{
        height: 82px;
        line-height: 82px;
        text-align: center;
        background-color: #f5f5f5;
    }
}